@import "./mixins/_button.scss";

.cl-button {
    cursor: pointer;
    text-align: center;
    min-width: $--button-medium-min-width;
    border: 1px solid $--color-primary;
    @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--font-size-small, $--button-border-radius);

    & + & {
        margin-left: $--margin-md
      }

    &--primary {
        color: $--color-white;
        background-color: $--button-primary-background-color;
        border-color: $--button-primary-background-color;
        &:hover {
            background-color: $--button-hover-primary-background-color;
        }
        &.is-disabled{
            cursor: not-allowed;
            color: $--color-white;
            border-color:$--button-disabled-primary-color;
            background-color: $--button-disabled-primary-color;
           
        }
    }

    &--primary_notbg {
        color: $--color-primary;
        border-color: $--color-primary;
        &:hover {
            color: $--color-white;
            background-color: $--button-primary-background-color;
        }
        &.is-disabled{
            cursor: not-allowed;
            color: $--button-disabled-primary-color;
            border-color: $--button-disabled-primary-color;
            background-color: $--color-white;
            
        }
    }

    &--disabled {
        color: $--color-white;
        border-color: $--button-disabled-defualt-background-color;
        background: $--button-disabled-defualt-background-color;
    }
    &.is-block {
        width: 100%;
     }

    &--text{
        border-color: transparent;
        color: $--button-default-font-color;
    }
    &--text_primary{
        border-color: transparent;
        color: $--button-primary-font-color;
    }
    &--text_info{
        border-color: transparent;
        color: $--button-info-font-color;
    }
    &--text_success{
        border-color: transparent;
        color: $--button-success-font-color;
    }

    &--text_danger{
        border-color: transparent;
        color: $--button-danger-font-color;
    }

    &--medium {
        min-width: $--button-medium-min-width;
    }

    &--small {
        min-width: $--button-small-min-width;
    }


}


